<!--
* @name: 侧边文章目录
* @author: DuanYiPeng
* @date: 2020-08-03
-->
<template>
    <div class='sideDirectory'>
        <div class="icn-main" >
            <div
                flex="cross:center  "
                class="row"
                v-for="(item,index) in directoryList"
                :style="[
                    {'fontSize':hClass[item.tagName].fz},
                    {'font-weight':hClass[item.tagName].fw},
                    {'color':selectId == item.id ?'#1296db':'#585858'}
                ]"
                :key="index"
                @click="scrollTo(item.id)">
                <span class="sing" flex-box="0" :style="{'marginRight':item.level*12+'px' }">{{item.tagName}}</span>
                {{item.innerText}}
            </div>
        </div>
    </div>
</template>

<script>
    import Velocity from "velocity-animate"
    export default {
        name: "sideDirectory",
        props:{
            directoryList:{
                type:Array,
                default:()=>{
                    return []
                }
            }
        },
        components: {},
        data() {
            return {
                // 菜单状态
                menuShow:false,
                // 标题样式
                hClass:{
                    'h1':{
                        'fz':'18px',
                        'fw':'600'
                    },
                    'h2':{
                        'fz':'16px',
                        'fw':'400'
                    },
                    'h3':{
                        'fz':'16px',
                        'fw':'400'
                    },
                    'h4':{
                        'fz':'15px',
                        'fw':'400'
                    },
                    'h5':{
                        'fz':'12px',
                        'fw':'400'
                    },
                    'h6':{
                        'fz':'12px',
                        'fw':'400'
                    },
                },
                // 选中id
                selectId:null
            }
        },
        created() {
        },
        mounted() {
        },
        computed: {},
        methods: {
            // 滚动到指定位置
            scrollTo(id){
                this.selectId = id;
                let parentEl = this.$parent.$refs.article;
                let idEl = document.getElementById(id)
                Velocity(idEl, "scroll", { duration: 500, easing: "easeOutQuart", container: parentEl  });
            },
            // 打开目录
            openBtn(){
                let iconBtn = this.$refs.iconBtn;
                Velocity(iconBtn, {
                    width: "70%",
                    height:'60%',
                    borderRadius:'.32rem',
                    backgroundColorAlpha:1
                }, {
                    easing:  "linear" ,
                    duration: 300,
                    complete:()=>{
                        this.menuShow = true
                    }
                });
            },
            // 关闭按钮
            closeDirectory(){
                this.menuShow = false;
                let iconBtn = this.$refs.iconBtn;
                Velocity(iconBtn, 'reverse',{
                    easing:  "easeOutQuart" ,
                    duration: 250
                });

            }
        },
    }
</script>
<style scoped lang='scss'>
    .sideDirectory{
        .icn-main{
            text-align: left;
            .row{
                min-height: 52px;
                padding: 0 14px;
                color: #585858;
                transition: all .2s ease-in;
                cursor: pointer;
                &:hover{
                    background-color: #b1b1b1;
                }
                .sing{
                    font-style:italic;
                    padding: 0;
                    color:#e1e1e1;
                    margin-right: 4px;
                    font-size: 12px
                }
            }
        }
    }
</style>
